<template>
    <div class="img-container">
        <img v-lazy="imgObj" lazy="loading" />
    </div>
</template>
<script>
export default {
  name: "my-image",
  props: {
    imgUrl: {
      type: String
    }
  },
  computed: {
    imgObj() {
      return `${this.imgUrl}?imageView2/0/w/200`;
    }
  }
};
</script>
<style lang="stylus" rel="stylesheet/stylus">
@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.img-container {
    text-align: left;
    position: relative;
    overflow hidden;

    img {
        width: 100%;
        height: 100%;
        position: absolute;
    }

    &.fade {
        img[lazy='loaded'] {
            -webkit-animation-duration: 1s;
            animation-duration: 1s;
            -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
            -webkit-animation-name: fadeIn;
            animation-name: fadeIn;
        }
    }

    img[lazy='loading'] {
        width: .22rem !important;
        height: .22rem !important;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }

    img[lazy='error'] {
        border-radius: 2px;
        -webkit-animation-duration: 1s;
        animation-duration: 1s;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
        -webkit-animation-name: fadeIn;
        animation-name: fadeIn;
    }
}
</style>
